<template>
  <div id="app">
    <HmHeader />
    <HmMain />
    <HmFooter />
    <span>第一个:</span>
    <BaseCount />
    <span>第二个:</span>
    <BaseCount />
    <span>第三个:</span>
    <BaseCount />
    <span>第四个:</span>
    <BaseCount />
    <hr />
    <span>第一处:</span>
    <div class="base-count">
      <button @click="obj.count--">-</button>
      <span>{{ obj.count }}</span>
      <button @click="obj.count++">+</button>
    </div>
    <span>第二处:</span>
    <div class="base-count">
      <button @click="obj.count--">-</button>
      <span>{{ obj.count }}</span>
      <button @click="obj.count++">+</button>
    </div>
    <h3>小黑的礼物清单</h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{ count }} 个</p>
    <p>礼物总数：{{ count }} 个</p>
    <p>礼物总数：{{ count }} 个</p>
    <!-- 点击响应 -->
    <button @click="changeCount">修改礼物数量</button>
  </div>
</template>

<script>
import HmMain from "./components/HmMain.vue";
import HmHeader from "./components/HmHeader.vue";
import HmFooter from "./components/HmFooter.vue";
import BaseCount from "./components/BaseCount.vue";
export default {
  name: "App",
  components: {
    HmHeader,
    HmMain,
    HmFooter,
    BaseCount,
  },
  data() {
    return {
      obj: {
        count: 10,
      },
      // 现有的数据
      list: [
        { id: 1, name: "篮球", num: 1 },
        { id: 2, name: "玩具", num: 2 },
        { id: 3, name: "铅笔", num: 5 },
        { id: 4, name: "足球", num: 15 },
      ],
    };
  },
  computed: {
    // count() {
    //   console.log("--computed--");
    //   return this.list.reduce((sum, item) => sum + item.num, 0);
    // },
    // 另一种写法
    count: {
      set() {},
      get() {
        console.log("--count--");
        return this.list.reduce((sum, item) => sum + item.num, 0);
      },
    },
  },
  methods: {
    countFn() {
      console.log("--countFn--");
      return this.list.reduce((sum, item) => sum + item.num, 0);
    },
    changeCount() {
      this.list[3].num++;
    },
  },
};
</script>

<style lang="less">
#app {
  width: 600px;
  height: 600px;
  background-color: red;
}
table {
  border: 1px solid #000;
  text-align: center;
  width: 240px;
}
th,
td {
  border: 1px solid #000;
}
h3 {
  position: relative;
}
</style>
